<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
	<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">

	<meta name="description" content=" 	 		This is a flat in-the-page calendar. It is displayed when the page loads rather than when the user clicks a button. 		Certain days that contain extra information are displayed differently. 		The following days have extra information: 		 			 January 1 displays 'New Year.' 			 May 5 displays 'Cinco de Mayo.' 			 July 4 displays 'Fourth of July.' 			 July 14  displays 'Quatorze Juillet.' 		 		 		Use CSS to control the style for displaying extra information. ">
	<meta name="keywords" content="dhtml tools,javascript,DHTML Tools,Javascript,ajax,AJAX,Ajax,ajax tools,AJAX Tools,tools controls,simple javascript tools">
	<title>Zapatec DHTML Calendar Widget - Flat Calendar, Extra Information for Special Days.</title>

	<!-- Common JS files -->
	<script type='text/javascript' src='../../utils/zapatec.js'></script>

	<!-- Custom includes -->	
		<!-- import the calendar script -->
		<script type='text/javascript' src='../../utils/zpdict.js'></script>
		<script type="text/javascript" src="../../utils/lang/zpdate-en.js"></script>
		<script type="text/javascript" src="../../utils/zpdate.js"></script>
		<script type="text/javascript" src="../src/calendar.js"></script>

		<!-- other languages might be available in the lang directory; please check
		your distribution archive. -->


	<!-- ALL demos need these css -->
	<link href="../../website/css/zpcal.css" rel="stylesheet" type="text/css">
	<link href="../../website/css/template.css" rel="stylesheet" type="text/css">
	<style type="text/css">
		body {
			width: 778px;
		}
	</style>

	<!-- Theme css -->
	<link href="../themes/greengrass.css" rel="stylesheet" type="text/css">

	<link rel="SHORTCUT ICON" href="http://www.zapatec.com/website/main/favicon.ico">
	


</head>
<body>	<div class='zpCalSubHeader' style='text-align:center;'>Flat Calendar, Extra Information for Special Days.</div>

		<div class='zpCalDemoText'>
			<ul>
				<li>This demo uses the <b>greengrass theme</b>.</li>
				
	<div id="flatcal" style="float: right"></div>
		<li>This is a flat in-the-page calendar. It is displayed when the page loads rather than when the user clicks a button.</li>

		<li>Certain days that contain <strong>extra information</strong> are displayed differently.
		The following days have extra information:
		<ul>
			<li> January 1 displays "New Year."
			<li> May 5 displays "Cinco de Mayo."
			<li> July 4 displays "Fourth of July."
			<li> July 14  displays "Quatorze Juillet."
		</ul>
		</li>
		<li>Use CSS to control the style for displaying extra information.</li>

			</ul>
		</div>


	<script type="text/javascript">
		<!--  to hide script contents from old browsers
		// define info for dates in this table:
		var dateInfo = {
			"0101" : "New Year",
			"0505" : "Cinco de Mayo",
			"0704" : "Fourth of July",
			"0714" : "Quatorze Juillet"
		};

		function getDateText(date, y, m, d) {
			var inf = dateInfo[Zapatec.Date.print(date, "%m%d")];
			if (!inf) {
				return d + "<br/>&nbsp;";
				} else {
				return d + "<br/><span class='zpCalDayInfo'>" + inf + "<" + "/span>";
			}
		};

		function flatCallback(cal) {
			if (cal.dateClicked) {
				// do something here
				window.status = "Selected: " + cal.currentDate;
				var inf = dateInfo[Zapatec.Date.print(cal.currentDate, "%Y%m%d")];
				if (inf) {
					window.status += ".  Additional info: " + inf;
				}
			}
		};
	// end hiding contents from old browsers  -->
	</script>

		<script type="text/javascript">
		var cal = new Zapatec.Calendar({
		
			flat: "flatcal",
			dateText: getDateText,
			flatCallback: flatCallback,
			theme: "greengrass"

		});
		
		
	</script>

	<noscript>
		<br/>
		This page uses an <a href='http://www.zapatec.com/website/main/products/suite/'>
		AJAX Component</a> - Zapatec DHTML Calendar Widget, but your browser does not support Javascript.
		<br/>
		<br/>
	</noscript>
		<br/><br/><br/>
		<div class="footer" style='width: 778px; text-align:center; margin-top:2em'>
		&copy; 2004-2009 <strong> <a href='http://www.zapatec.com/'>Zapatec, Inc.</a> </strong>
		</div>
</body>
</html>
